<template>
    <div class="padding20">
        <!--列表页-->
        <div v-show="showList">
            <!--条件查询-->
            <el-form :model="queryParam" label-position="left" size="small">
                <el-row :gutter="30" justify="start">
                    <el-col :xs="12" :sm="6">
                        <el-form-item label="昵称:" label-width="40px">
                            <el-input v-model="queryParam.name" placeholder="昵称" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="6">
                        <el-form-item label="账号:" label-width="40px">
                            <el-input v-model="queryParam.account" placeholder="账号" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="6">
                        <el-form-item label="手机号:" label-width="55px">
                            <el-input v-model="queryParam.phone" placeholder="手机号" @keyup.enter.native="selectPage"
                                      clearable/>
                        </el-form-item>
                    </el-col>
                    <!--展开/收起-->
                    <el-col :xs="12" :sm="4">
                        <div style="float: left;overflow: hidden;">
                            <el-button size="small" @click="selectPage" type="primary">查询</el-button>
                            <el-button size="small" @click="clearParam">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <!--操作按钮-->
            <div class="mi-container">
                <el-button size="mini" class="mi-item" type="primary" icon="el-icon-plus"
                           @click="show('insert')">添加用户
                </el-button>
            </div>

            <!--表格数据-->
            <el-table empty-text="当前条件下，暂无匹配数据"
                      :data="tableData"
                      border fit style="width: 100%;"
                      highlight-current-row show-overflow-tooltip
                      @selection-change="selectionChange">
                <!--                <el-table-column type="selection" width="55"/>-->
                <el-table-column type="index" label="序号" width="80" align="center"/>
                <el-table-column label="昵称" prop="name" align="center"/>
                <el-table-column label="账号" prop="account" align="center"/>
                <el-table-column label="角色" width="120" prop="roleName" align="center">
                    <template slot-scope="scope">
                        <el-tag class="rit5">{{scope.row.roleName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="phone" align="center"/>
                <el-table-column label="注册时间" prop="createTime" width="170" align="center"/>
                <el-table-column label="最后登录时间" prop="loginTime" width="170" align="center"/>
                <el-table-column label="最后登录IP" prop="loginIp" width="120" align="center"/>
                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button plain size="mini" @click="show('info',scope.row)">
                            详情
                        </el-button>
                        <el-button type="success" plain size="mini" @click="show('update',scope.row)">
                            编辑
                        </el-button>
                        <el-dropdown @command="handleCommand($event,scope.$index, scope.row)" style="margin-left: 10px">
                            <el-button type="primary" plain size="mini">
                                更多<i class="el-icon-arrow-down el-icon--right"/>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="delete"><i class="el-icon-delete"/>删除</el-dropdown-item>
                                <el-dropdown-item command="refreshPassword"><i class="el-icon-s-open"/>重置密码
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>

                    </template>
                </el-table-column>
            </el-table>

            <!--分页插件-->
            <Pagination @pagination="selectPage"
                        v-show="pageParam.pages>0"
                        :total-data-num="pageParam.total"
                        :current-page="pageParam.current"
                        :page-size="pageParam.size"/>
        </div>

        <!--编辑（新增/修改）-->
        <transition name="el-fade-in">
            <UserEdit v-if="showEdit" :data="viewData" :option="viewOption" @close="close"/>
        </transition>

        <!--详情页-->
        <el-drawer size="60%" direction="rtl"
                   :title="this.viewOption.title" :visible.sync="showInfo">
            <div class="pane">
                <UserInfo v-if="showInfo" :data="viewData" :option="viewOption" @close="close"/>
            </div>
        </el-drawer>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Pagination from "@/components/Pagination/Pagination.vue";
    import Kit from "@/core/mixin/Kit";
    import UserEdit from "@/views/system/user/edit.vue";
    import UserInfo from "@/views/system/user/info.vue";
    import {errorMsg, infoMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {isBlank, md5} from "@/core/utils/Utils";

    @Component({
        name: 'UserList',
        components: {
            Pagination,
            UserEdit,
            UserInfo,
        },
    })
    export default class UserList extends mixins(BaseVue, Kit) {
        //切换视图
        show(type: any, data: any = {}) {
            //赋值
            this.viewData = data;
            this.viewOption.type = type;
            //详情
            if (type == "info") {
                this.viewOption.title = '用户详情';
                this.showInfo = true;
            }
            //新增
            if (type == "insert") {
                this.viewOption.title = '新增用户';
                this.showEdit = true;
                this.showList = false;
            }
            //修改
            if (type == "update") {
                this.viewOption.title = '修改用户信息';
                this.showEdit = true;
                this.showList = false;
            }
        }

        //视图关闭回调
        close(obj: any = {}) {
            this.showInfo = false;
            this.showEdit = false;
            setTimeout(() => {
                this.showList = true;
                if (obj.refresh) {
                    this.selectPage();
                }
            }, 200);
        }

        //初始化
        async mounted() {
            this.selectPage();
        }

        //查询分页
        selectPage(page: any = null) {
            this.pageData(API.sysUserPage, page)
                .then((res: any) => {
                })
        }

        //更多按钮事件
        handleCommand(command: any, index: any, row: any) {
            switch (command) {
                case "delete":
                    this.delete(row.id);
                    break;
                case "refreshPassword":
                    this.refreshPassword(row);
                    break;
            }
        }

        delete(id: any) {
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $http.post(API.sysUserDel, [id]).then((res: any) => {
                    if (res.success) {
                        this.selectPage();
                        successMsg("已删除");
                    }
                });
            }).catch(() => {
                infoMsg("已取消!")
            });
        }

        refreshPassword(row: any) {
            this.$prompt("请输入新密码", "重置密码", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then((val: any) => {
                if (isBlank(val.value) || val.value.length < 8) {
                    errorMsg("请输入最少八位的密码");
                    return;
                }
                $http.post(API.sysResetPassword, {
                    id: row.id,
                    password: md5(row.account + val.value)
                }).then((res: any) => {
                    if (res.success) {
                        successMsg("密码已重置为:" + val.value);
                    }
                });
            }).catch(() => {

            });
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }
    }

</script>

<style type="scss">

</style>
